<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search v-model="searchValue" placeholder="商品搜索 共239万款好物" input-align="center" />
    <!-- 轮播图 -->
    <van-swipe :width="375" :height="200" :autoplay="3000">
      <van-swipe-item v-for="(item, index) in swipersData" :key="index">
  
        <img class="swiperImg" :src="item.image_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格组件  -->
    <van-grid :column-num="5">
      <van-grid-item v-for="(item,index) in channelData" :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>
    <!-- 品牌制造直供 -->
    <div class="brand">
      <van-cell class="brand-cell" :center="true" value="品牌制造直供" />
      <van-grid :column-num="2">
        <van-grid-item v-for="(item,index) in brandData" :key="index">
          <van-image fit="cover" :src="item.new_pic_url"/>
          <h4 class="title">{{item.name}}</h4>
          <p class="price">{{item.floor_price}}元起</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 上新商品推荐 -->
    <div class="newGoods">
      <van-cell class="new-cell" :center="true" value="上新商品推荐" />
      <van-grid :column-num="2">
        <van-grid-item v-for="(item,index) in newGoodsData" :key="index">
          <van-image fit="cover" :src="item.list_pic_url"/>
          <h4 class="title">{{item.name}}</h4>
          <p class="price">{{item.retail_price}}元起</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 人气商品推荐 -->
    <div class="hotGoods">
      <van-cell class="new-cell" :center="true" value="人气商品推荐" />
      <van-card v-for="(item,index) in hotGoodsData" :key="index" :title="item.name" :desc="item.goods_brief" :price="item.retail_price" :thumb="item.list_pic_url">
        
      </van-card>
    </div>
  </div>
</template>

<script>

// 导入axios模块
import axios from "axios"
// 导入api模块
import api from "@/assets/config/api.js"
// 导入底部导航组件
// import tabBar from "@/components/tabbar.vue"
export default {
  data(){
    return{
      // 搜索框中的内容
      searchValue:"",
      // 首页页面数据
      homeData:{}
    }
  },
  // 计算属性
  computed:{
    // 轮播图数据
    swipersData:function(){
      console.log(this.homeData);
      
      // 先要判断数据是否为空
      if(typeof this.homeData.banner == "object"){
        return this.homeData.banner
      }else{
        return []
      }
    },
    // channel数据
    channelData:function(){
      // 先要判断数据是否为对象
      if(typeof this.homeData.channel == "object"){
        return this.homeData.channel
      }else{
        return []
      }
    },
    // 品牌制造直供
    brandData:function(){
      // 先要判断数据是否为空对象
      if(typeof this.homeData.brandList == "object"){
        return this.homeData.brandList
      }else{
        return []
      }
    },
    // 上新商品获取
    newGoodsData(){
      // 先要判断数据是否为空对象
      if(typeof this.homeData.newGoodsList == "object"){
        return this.homeData.newGoodsList
      }else{
        return []
      }
    },
    // 人气商品获取
    hotGoodsData(){
      // 先要判断数据是否为空对象
      if(typeof this.homeData.hotGoodsList == "object"){
        return this.homeData.hotGoodsList
      }else{
        return []
      }
    }

  },
  // 挂载数据
  async mounted(){
    // 获取首页数据
    let res =await axios.get(api.IndexUrl);
    console.log(res);
    this.homeData = res.data.data
    console.log(res.data.data);
    
    
  }
}
</script>
<style lang="less">
  .home{
    // 轮播图组件的图片
    .swiperImg{
      width: 100%;
      height: 100%;
    }
    .van-cell__value--alone{
      text-align: center;
    }
    // 品牌制造直供
    .brand{
      position: relative;
     
      // 制造商
      .title{
        position: absolute;
        top: 10px;
        left: 15px;
        font-size: 16px;
      }
      // 价格
      .price{
        position: absolute;
        top: 40px;
        left: 15px;
        font-size: 14px;
        color: #999;
      }
    }
    // 上新商品推荐
    .newGoods{
      // 标题
      .title{
        padding: 0;
        margin: 0;
        font-size: 15px;
      }
      // 价格
      .price{
        margin: 0;
        font-size: 14px;
        color: #999;
      }
    }
    // 人气商品推荐
    .hotGoods{
      align-items: center;
      // 标题样式
      .van-card__title{
        font-size: 14px;
        padding: 5px 0;
        color: #333;
        font-weight: 900;
        text-align: left;
      }
      // 简介描述
      .van-card__desc{
        max-height: 20px;
        color: #646566;
        line-height: 20px;
        font-size: 12px;
        text-align: left;
      }
      // 商品价格
      .van-card__bottom{
        text-align: left;
        .van-card__price{
        color: red;
        margin: 0;
        padding: 0;
        }
      }
      
    }
  }
</style>